<!--
 * @description: header导航
 * @Author: Islands
 * @Date: 2024-06-18 09:37:23
 * @LastEditTime: 2024-06-19 17:08:08
-->
<script lang="ts" setup>
import {
  ScreenfullButton,
  I18nButton,
  DarkButton,
  ThemeButton,
} from "../../index";
import { IconTooltip } from "@/components/SvgIcon";
import { props } from "../props";
const { collapse, onClick } = defineProps(props);
</script>
<template>
  <div class="header">
    <div class="header_left">
      <IconTooltip
        :onClick="onClick"
        :tooltipTitle="collapse ? $t(`tooltip.expand`) : $t(`tooltip.expandNo`)"
        :icon="collapse ? 'xiangyouzhankai' : 'Hdonghua-xiangzuozhankai'"
      />
    </div>
    <div class="header_right">
      <ScreenfullButton />
      <DarkButton />
      <ThemeButton />
      <I18nButton />
      <slot />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .header_left {
    padding-left: 5px;
  }
  .header_right {
    display: flex;
    justify-content: left;
    align-items: center;
    // gap: 10px;
  }
}
</style>
